<template>
<div>
  <el-card style="width: 500px;margin: 50px auto 0">
    <h1><i class="el-icon-arrow-left" @click="rollBack"></i>修改基本信息</h1>
    <el-divider></el-divider>
  <el-form :model="userInfo" status-icon ref="userInfo" :rules="rules"
           label-width="100px" class="el-main-form" style="position: relative">

    <span style="position: absolute;left: 20px;top: 50px">上传头像</span>
    <el-form-item prop="avatar" style="text-align: center">
      <!-- show-file-list 上传时是否显示进度条 -->
      <el-upload
          class="avatar-uploader"
          name="picFile"
          action="http://localhost:8080/upload/avatar"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
      >
        <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
    </el-form-item>
    <el-form-item label="用户名" prop="username">
      <el-input type="text" v-model="userInfo.username"></el-input>
    </el-form-item>
    <el-form-item label="昵称" prop="nickname">
      <el-input type="text" v-model="userInfo.nickname"></el-input>
    </el-form-item>
    <el-form-item label="性别" prop="gender" style="width: 250px">
      <el-radio-group v-model="userInfo.gender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="出生日期" prop="birthday">
      <el-date-picker type="date" placeholder="选择日期或输入 xxxx-xx-xx"
                      v-model="userInfo.birthday" style="width: 330px;">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="电话号码" prop="phone">
      <el-input type="text" v-model.number="userInfo.phone" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input type="text" v-model="userInfo.email" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="地址" prop="address" >
      <el-cascader size="large" :options="options" v-model="userInfo.address" style="width: 330px;"
                   @change="handleChangeChina" placeholder="请选择省市区"></el-cascader>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" style="width: 250px;" :plain="true" @click="change('userInfo')">保存</el-button>
    </el-form-item>
  </el-form>
  </el-card>
</div>
</template>

<script>
import {CodeToText, regionData} from "element-china-area-data";
import axios from "axios";

export default {
  data(){
    return{
      options: regionData,
      userInfo:{
        username:''
      },
      rules:{
        address: {
          required:true,message:"由于技术原因,此项必选",trigger:"blur"
        }
      }
    }
  },
  created() {
    this.userInfo=JSON.parse(sessionStorage.getItem("user"))
    this.userInfo.address = ''
    console.log(this.userInfo.avatar)
  },
  methods:{
    rollBack(){
      history.back()
    },
    handleAvatarSuccess(response,file,fileList){
      console.log("文件上传完成,图片名="+response)
      this.userInfo.avatar = response
    },
    handleChangeChina(value) {// 事件触发
      //value是省市区类似id 返回数组 [110000,110100,110101]，可以当发到后端存储，回显数据
      //汉字
      if (value[1] != null && value[2] != null) {
        this.line =
            CodeToText[value[0]] +
            CodeToText[value[1]] +
            CodeToText[value[2]]
      } else {
        if (value[1] != null) {
          this.line = CodeToText[value[0]] + CodeToText[value[1]]
        } else {
          this.line = CodeToText[value[0]]
        }
      }
    },
    change(formName){
      this.$refs[formName].validate((valid) =>
      {if(valid){
        let url = 'http://localhost:8080/users/update'
        this.userInfo.address = this.line
        axios.post(url,this.userInfo).then((response) => {
          let json=response.data
          let state=json.state
          if (state==20000){
            sessionStorage.setItem('user',JSON.stringify(this.userInfo))
            location.href="/"
          }
        })
      }
      })
    }
  }
}
</script>

<style>
.el-main-form {
  margin: 30px 30px 0 0;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  border-radius: 50%;
  font-size: 28px;
  color: #8c939d;
  width: 125px;
  height: 125px;
  line-height: 125px;
  text-align: center;
}

.avatar {
  width: 125px;
  height: 125px;
  display: block;
}

</style>